import React from 'react';
import { Link } from 'react-router';
import { History } from 'react-router';

require("../../imgs/logo@3x.png");

class Nav extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'Nav';

        // navMoe 2个选项
        // nav 主页的 nav
        // snav 俱乐部，运动员的 nav
        // navName snav 的名称
        // navActive mode=nav时, nav所在的位置
        this.state = {
            navMode: props.mode,
            navItems: [
                {name:"俱乐部", link: "/clublist"},
                {name:"运动员", link: "/athletelist"},
                {name:"赛程", link: "/schedulelist"},
                {name:"视频", link: "/videolist"},
                {name:"规则", link: "/rules"}
            ],
            navName: props.name,
            // navActive: props.position
            navActive: 0
        }
    }

    onhandleChangeNav( nav ){
        console.log(nav);
        this.setState({
            navActive: nav
        });
    }

    componentDidMount(){
        let hash = window.location.hash;
        console.log( `hash: ${hash}` );

        if('nav' == this.state.navMode) {
            let navHashList = [ 'clublist', 'athletelist', 'schedulelist', 'videolist', 'rules' ];
            let positionTemp;
            $.each( navHashList, function(index, el) {
                console.log(hash.indexOf(el));
                if( '-1' != hash.indexOf(el) ) {
                    console.log( el );
                    positionTemp = index;
                    return false;
                }
            });

            this.setState({
                navActive: positionTemp
            });
        }
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            navName: nextProps.name
        });
    }


    render() {

        let navLists = this.state.navItems.map(function(item, index) {
            return (
                <li key={index} className={ index == this.state.navActive? "active": "" } data-index={index} onClick={this.onhandleChangeNav.bind(this, index)}  > <span/><Link to={item.link}>{item.name}</Link> </li>
            );
        }.bind(this))


        let nav = function( mode ){
            if( mode=="nav" ) {
                return (
                    <nav className="nav">
                        <Link className="logo" to="/">
                            <img src="./imgs/logo@3x.png" />
                        </Link>
                        <ul>
                            {navLists}
                        </ul>
                        <a className="iconfont" >&#xe608;</a>
                    </nav>
                )
            } else if( mode=="snav" ) {
                console.log( this.History );
                return (
                    <nav className="snav">
                        <i className="iconfont" onClick= {() => window.history.back()} >&#xe602;</i>
                        <span>{this.state.navName}</span>
                    </nav>
                );
            }
        }.bind(this)

        return (
            nav(this.state.navMode)
        );
    }
}

export default Nav;
